<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="楼盘名称">
                <el-input v-model="formInline.name" placeholder="楼盘名称" clearable />
            </el-form-item>
            <el-form-item label="经纪人">
                <el-select v-model="formInline.person" placeholder="经纪人" clearable style="width: 190px;">
                    <el-option label="李兰" value="李兰" />
                    <el-option label="黄明" value="黄明" />
                    <el-option label="昭武" value="昭武" />
                    <el-option label="李四" value="李四" />
                </el-select>
            </el-form-item>
            <el-form-item label="装修">
                <el-select v-model="formInline.level" placeholder="请选择装修" clearable style="width: 190px;">
                    <el-option label="毛坯" value="毛坯" />
                    <el-option label="简装" value="简装" />
                    <el-option label="精装" value="精装" />
                </el-select>
            </el-form-item>
            <el-form-item label="几居室">
                <el-select v-model="formInline.sizeRoom" placeholder="请选择几居室" clearable style="width: 190px;">
                    <el-option label="一居" value="一居" />
                    <el-option label="两居" value="两居" />
                    <el-option label="三居" value="三居" />
                </el-select>
            </el-form-item>
            <el-form-item label="是否出售">
                <el-select v-model="formInline.state" placeholder="是否出售" clearable style="width: 190px;">
                    <el-option label="已出售" value="1" />
                    <el-option label="未出售" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData">搜索</el-button>
            </el-form-item>
        </el-form>

        <el-button type="primary" @click="$router.push('/propertymanage/roomadd')">新增房源</el-button>
        <el-table :data="list" style="width: 100%">
            <el-table-column prop="id" label="序号" width="180" />
            <el-table-column prop="name" label="楼盘名称" />
            <el-table-column prop="title" label="详情" >
                <template #default="{row}">
                    <div v-html="row.title"></div>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="价格" />
            <el-table-column prop="person" label="经纪人" />
            <el-table-column prop="state" label="状态">
                <template #default="{ row }">
                    {{ row.state === '1' ? '已出售' : '未出售' }}
                </template>
            </el-table-column>
            <el-table-column prop="level" label="装修" />
            <el-table-column prop="sizeRoom" label="几居室" />
            <el-table-column prop="url" label="图片">
                <template #default="{ row }">
                    <!-- <img :src="row.url" alt="" width="100px"> -->
                    <el-image :key="row.url" :src="row.url" lazy />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="260">
                <template #default="{ row }">
                    <el-button type="success" size="small" @click="handleDetail(row)">详情</el-button>
                    <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="pageCode" />

        <el-drawer v-model="dialog" title="I have a nested form inside!" :before-close="handleClose" direction="rtl"
            class="demo-drawer">
            <div class="demo-drawer__content">
                <el-form :model="form" label-width="auto" style="max-width: 600px">
                    <el-form-item label="序号">
                        <el-input v-model="form.id" disabled />
                    </el-form-item>
                    <el-form-item label="楼盘名称">
                        <el-input v-model="form.name" disabled />
                    </el-form-item>
                    <el-form-item label="详情">
                        <el-input v-model="form.title" disabled />
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input v-model="form.price" disabled />
                    </el-form-item>
                    <el-form-item label="面积">
                        <el-input v-model="form.size" disabled />
                    </el-form-item>
                    <el-form-item label="图片">
                        <!-- <el-input v-model="form.url" disabled /> -->
                        <el-image style="width: 100px; height: 100px" :src="form.url" :zoom-rate="1.2" :max-scale="7"
                            :min-scale="0.2" :preview-src-list="[form.url]" :initial-index="4" fit="cover" />
                    </el-form-item>
                    <el-form-item label="经纪人">
                        <el-select v-model="form.person" placeholder="请选择经纪人" disabled>
                            <el-option label="李兰" value="李兰" />
                            <el-option label="黄明" value="黄明" />
                            <el-option label="昭武" value="昭武" />
                            <el-option label="李四" value="李四" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="装修">
                        <el-select v-model="form.level" placeholder="请选择装修" disabled>
                            <el-option label="毛坯" value="毛坯" />
                            <el-option label="简装" value="简装" />
                            <el-option label="精装" value="精装" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="几居室">
                        <el-select v-model="form.sizeRoom" placeholder="请选择几居室" disabled>
                            <el-option label="一居" value="一居" />
                            <el-option label="两居" value="两居" />
                            <el-option label="三居" value="三居" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否出售">
                        <el-select v-model="form.state" placeholder="是否出售" disabled>
                            <el-option label="已出售" value="1" />
                            <el-option label="未出售" value="2" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click="dialog = false">Cancel</el-button>
                    <el-button type="primary" :loading="loading" @click="dialog = false">
                        {{ loading ? 'Submitting ...' : 'Submit' }}
                    </el-button>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script setup>
import axios from 'axios';
import { ref, watch, reactive } from 'vue';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';

const router = useRouter()

const dialog = ref(false)
const loading = ref(false)

const form = ref({
    id: '',
    name: '',
    title: '',
    price: '',
    size: '',
    person: '',
    level: '',
    sizeRoom: '',
    state: '',
    url: ''
})

const formInline = reactive({
    name: '',
    person: '',
    level: '',
    sizeRoom: '',
    state: '',
})

const list = ref([])
// 数据总量
const total = ref(0)
// 当前页码
const pageCode = ref(1)

// 详情
const handleDetail = (row) => {
    dialog.value = true
    console.log(row);

    form.value = { ...row }
}

// 编辑
const handleEdit = (row) => {

    router.push({
        path: '/propertymanage/roomedit',
        query: row
    })
}

// 删除数据
const handleDelete = (row) => {
    axios.delete('/api/room/list', { params: { id: row.id } }).then(res => {
        ElMessage(res.data.message)
        getData()
    })
}

// 获取数据
const getData = () => {
    axios.get('/api/room/list', { params: { pageCode: pageCode.value, ...formInline } }).then(res => {
        list.value = res.data.data.list
        total.value = res.data.data.total
    })
}

getData()
// 监听页码，发生变化时重新请求数据
watch(pageCode, () => {
    getData()
})

</script>
